<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>预警系统</title>
<link rel="stylesheet" type="text/css"
	href="/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="/themes/icon.css">
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/util.js"></script>
<script type="text/javascript" src="/js/eui_manager.js"></script>
</head>
<body>
	<ul id="nav"></ul>
	<div id="cc" class="easyui-layout" fit="true">
		<div data-options="region:'north'" style="height: 62px;">
			<div style="margin: 0px;" id="condtionDiv">
				<label for="bTime">开始</label> <input class="easyui-datetimebox"
					name="bTime" id="bTime"
					data-options="required:true,showSeconds:false" value=""> <label
					for="eTime">结束</label> <input class="easyui-datetimebox"
					name="eTime" id="eTime"
					data-options="required:true,showSeconds:false" value=""> <label
					for="type">统计类别</label><input id="type" name="type" value="">
				<label for="host">机器</label><input id="host" name="host" value=""><label
					for="proc">进程</label><input id="proc" name="proc" value=""><hr/>
				<label for="method">方法</label><input id="method" name="method"
					value=""> <label for="sort">排序</label><input id="sort"
					name="sort" value=""> <label for="group">分组</label> <select
					class="easyui-combobox" id="group">
					<option value="method">method</option>
					<option value="server">server</option>
					<option value="proc">proc</option>
					<option value="proc,method" selected="selected">proc_method</option>
					<option value="server,proc,method">server_proc_method</option>
				</select> <label for="desc">顺序</label><input id="desc" name="desc" value="">
				<button onclick="reloadTable()">查询</button>
			</div>
		</div>
		<div data-options="region:'center'" style="margin:0px;">
			<table id="dg"></table>
		</div>
	</div>

	<script type="text/javascript">
		var tbl = $('#dg');
		var now = new Date();
		$('#bTime').val(now.Format('MM/dd/yyyy 00:00'));
		$('#eTime').val(now.Format('MM/dd/yyyy HH:mm'));

		function getFormVal() {
			return {
				'method' : $('#method').val(),
				'sort' : Util.getCombobox('#sort'),
				'desc' : Util.getCombobox('#desc'),
				'proc' : Util.getCombobox('#proc'),
				'server' : Util.getCombobox('#host'),
				'group' : Util.getCombobox('#group'),
				'eTime' : toMinute(getTime('#eTime')),
				'bTime' : toMinute(getTime('#bTime')),
				'static_type' : Util.getCombobox('#type'),
			};
		}
		function toMinute(times) {
			console.log(getTime('#bTime'));
			return times / 60000;
		}

		function reloadTable() {
			$('#dg').datagrid('reload');
		}

		function compareCopy(src, to) {
			var isChange = false;
			for ( var k in src) {
				if (src[k] != to[k]) {
					to[k] = src[k];
					isChange = true;
				}
			}
			return isChange;
		}

		function timeFormat(value, row, index) {
			if (value == 0) {
				return value;
			}
			var t2 = parseInt((value / row['cc']) * 100);
			if (t2 > 14) {
				return '<label style="color:red">' + value + '(' + t2
						+ '%)</label>';
			} else {
				return value + '(' + t2 + '%)';
			}
		}

		$(function() {
			var columns = [ [ {
				field : 'server',
				title : '机器',
				width : '8%',
			}, {
				field : 'static_type',
				title : '类别',
				width : '5%',
			}, {
				field : 'proc',
				title : '进程',
				width : '7%',
			}, {
				field : 'api',
				title : '接口',
				width : '11%',
			}, {
				field : 'method',
				title : '方法',
				width : '13%',
			}, {
				field : 'cc',
				title : '调用次数',
				width : '8%',
			}, {
				field : 'avgt',
				title : '平均耗时',
				width : '8%',
				formatter : function(value, row, index) {
					return value.toFixed(2);
				}
			}, {
				field : 'maxn',
				title : '最大耗时',
				width : '8%',
			}, {
				field : 'ts1',
				title : '100ms',
				width : '8%',
				formatter : timeFormat
			}, {
				field : 'ts2',
				title : '500ms',
				width : '8%',
				formatter : timeFormat
			}, {
				field : 'ts3',
				title : '1000ms',
				width : '8%',
				formatter : timeFormat
			}, {
				field : 'ts4',
				title : '5000ms',
				width : '8%',
				formatter : timeFormat
			} ] ];

			var desc = [ {
				"name" : "升序",
				"value" : "asc"
			}, {
				"name" : "降序",
				"value" : "desc"
			} ];
			var sort = [ {
				"name" : "最大耗时",
				"value" : "maxn"
			}, {
				"name" : "平均耗时",
				"value" : "avgt"
			}, {
				"name" : "调用次数",
				"value" : "cc"
			} ];

			initNavMenu('#nav');
			Util.builCombox('#proc', '/ui/select?id=queryProcess', 'key',
					'value');
			Util.builCombox('#type', '/ui/select?id=queryClassify', 'key',
					'value','dubbo');
			Util.builCombox('#host', '/ui/select?id=queryMonitorHosts', 'key',
					'value');
			Util.builCombValSelect('#sort', sort, 'name', 'value', 'maxn',
					false);
			Util.builCombValSelect('#desc', desc, 'name', 'value', 'desc',
					false);

			tbl.lastContdion = {};
			tbl.datagrid({
				url : '/ui/report?id=selectMethodInfo',
				pageSize : 20,
				columns : columns,
				pagination : true,
				fitColumns : true,
				singleSelect : true,
				pageList : [ 20, 30, 50 ],
				onLoadSuccess : function(data) {
					tbl.query_return_total = data.total;
				},
				onBeforeLoad : function(data) {
					data.total = tbl.query_return_total;
					var args = getFormVal();
					if (compareCopy(args, tbl.lastContdion)) {
						data.total = undefined;
					}
					data.params = JSON.stringify(tbl.lastContdion);
				}
			});

			tbl.datagrid('getPager').pagination({
				beforePageText : '',// 页数文本框前显示的汉字
				afterPageText : '',//只能上下翻页
				displayMsg : '',
			});

		});
	</script>
</body>
</html>
